<template>
	<div class="login_page_login" id="container">
		<div class="bg-box" id="output"></div>
		<transition name="openSmall">
			<div class="loginIng_login" v-if="loginIngNow">
				<div class="loginIng_div_login jzxz_com bounce">
					<span class="letter">正</span>
					<span class="letter">在</span>
					<span class="letter">登</span>
					<span class="letter">陆</span>
					<span class="letter">.</span>
					<span class="letter">.</span>
					<span class="letter">.</span>
				</div>
			</div>
		</transition>
		<transition name="enterLogin" appear>
			<div class="loginBox_login">
				<div style="width: 100%;height: 100px"></div>
				<div style="height: 100px;text-align: center;font-size: 28px;width: 380px;margin: 0 auto;color: #606266;line-height: 40px;">
					<!-- 智慧工地
					<br />
					后台管理系统 -->

					黔智灵数实名制系统
					<br />
					监督管理平台
				</div>
				<el-form size="medium" :model="loginForm" :rules="loginRules" ref="loginForm" style="display: flex;flex-direction: column;justify-content: space-around;flex: 1;width: 330px;margin: 0 auto">
					<el-form-item prop="zsjmhdzh">
						<el-input ref="zsjmhdzh" v-model="loginForm.zsjmhdzh" class="loginInput_ZH_login" placeholder="账号"
						 @keyup.enter.native="handleLogin"></el-input>
					</el-form-item>
					<el-form-item prop="zsjmhdmm">
						<el-input ref="zsjmhdmm" v-model="loginForm.zsjmhdmm" type="password" class="loginInput_MM_login" placeholder="密码"
						 @keyup.enter.native="handleLogin"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button :loading="loading" style="background-color: #49566f !important;border-color: #49566f !important;color: #fff !important;width: 100%;"
						 @click.native.prevent="handleLogin">
							登 录
						</el-button>
					</el-form-item>
					<div style="display: flex;flex-direction: row-reverse;">
						<el-checkbox v-model="remenber">记住我</el-checkbox>
					</div>
				</el-form>
				<div style="width: 100%;height: 100px"></div>
			</div>
		</transition>
		<!-- <el-card class="tipBox_login">
			<p>如有问题请联系以下联系方式</p>
			<p>QQ群：759712878</p>
			<p>电话：15519137361</p>
			<p>2020/07/16</p>
		</el-card> -->
	</div>
</template>
<script>
	import {
		Victor
	} from '../../js/vector.js'; //蓝色多边形变换动态背景的js文件
	import Cookies from 'js-cookie';
	import {
		post
	} from '../../api/myFunction.js';
	import {
		validUsername
	} from '@/utils/validate';
	export default {
		name: 'login',
		data() {
			const validateUsername = (rule, value, callback) => {
				// if (!validUsername(value)) {
				if (!value.trim().length > 0) {
					callback(new Error('请输入用户名！'));
				} else {
					callback();
				}
			};
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error('密码不能少于6个字符!'));
				} else {
					callback();
				}
			};
			return {
				remenber: true,
				loginIngNow: false,
				loginForm: {
					zsjmhdzh: '',
					zsjmhdmm: ''
				},
				loginRules: {
					zsjmhdzh: [{
						required: true,
						trigger: 'blur',
						validator: validateUsername
					}],
					zsjmhdmm: [{
						required: true,
						trigger: 'blur',
						validator: validatePassword
					}]
				},
				zsjmhdmmType: 'zsjmhdmm',

				loading: false,

				redirect: undefined,
				otherQuery: {}
			};
		},
		watch: {
			$route: {
				handler: function(route) {
					const query = route.query;
					if (query) {
						this.redirect = query.redirect;
						this.otherQuery = this.getOtherQuery(query);
					}
				},
				immediate: true
			}
		},
		mounted() {
			this.blue_init();
			var saveUsername = window.atob(Cookies.get('zsjmhdzh'));
			var savePassword = window.atob(Cookies.get('zsjmhdmm'));
			if (saveUsername != null && saveUsername != undefined && saveUsername != '' && savePassword != null && savePassword !=
				undefined && savePassword != '') {
				this.loginForm.zsjmhdzh = saveUsername;
				this.loginForm.zsjmhdmm = savePassword;
			}

			if (this.loginForm.zsjmhdzh === '') {
				this.$refs.zsjmhdzh.focus();
			} else if (this.loginForm.zsjmhdmm === '') {
				this.$refs.zsjmhdmm.focus();
			}
		},
		methods: {
			//蓝色多边形背景
			blue_init() {
				//初始化 传入dom id
				Victor('container', 'output', ['#024a44', '#007984']);
			},
			loginIng_: function() {
				var dom = document.getElementsByClassName('loginBox_login')[0];
				var childrenDoms = dom.children;
				this.loginIngNow = true;
				setTimeout(() => {
					dom.className = 'loginBox_login bianxiao';
				}, 5);
				childrenDoms[0].className = 'yingcang';
				childrenDoms[1].className = 'yingcang';
				childrenDoms[2].className = 'el-form yingcang';
				childrenDoms[3].className = 'yingcang';
			},
			loginOver: function() {
				var dom = document.getElementsByClassName('loginBox_login')[0];
				var childrenDoms = dom.children;
				this.loginIngNow = false;
				dom.className = 'loginBox_login bianda';
				childrenDoms[0].className = 'buyingcang';
				childrenDoms[1].className = 'buyingcang';
				childrenDoms[2].className = 'el-form buyingcang';
				childrenDoms[3].className = 'buyingcang';
			},
			checkCapslock(e) {
				const {
					key
				} = e;
				this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z';
			},
			showPwd() {
				if (this.zsjmhdmmType === 'zsjmhdmm') {
					this.zsjmhdmmType = '';
				} else {
					this.zsjmhdmmType = 'zsjmhdmm';
				}
				this.$nextTick(() => {
					this.$refs.zsjmhdmm.focus();
				});
			},
			handleLogin() {
				var that = this;
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loginIng_();
						this.loading = true;
						var para = {};
						para.username = this.loginForm.zsjmhdzh;
						para.password = this.loginForm.zsjmhdmm;
						this.$store
							.dispatch('user/login', para)
							.then(e => {
								if (that.remenber) {
									Cookies.set('zsjmhdzh', window.btoa(that.loginForm.zsjmhdzh.trim()), {
										expires: 30
									});
									Cookies.set('zsjmhdmm', window.btoa(that.loginForm.zsjmhdmm.trim()), {
										expires: 30
									});
								} else {
									Cookies.set('zsjmhdzh', '');
									Cookies.set('zsjmhdmm', '');
								}
								setTimeout(() => {
									that.$router.push({
										path: '/dashboard',
										query: that.otherQuery
									});
								}, 500);
							})
							.catch(e => {
								setTimeout(() => {
									that.loading = false;
									that.loginOver();
								}, 500);
							});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			getOtherQuery(query) {
				return Object.keys(query).reduce((acc, cur) => {
					if (cur !== 'redirect') {
						acc[cur] = query[cur];
					}
					return acc;
				}, {});
			}
		}
	};
</script>
<style scoped>
	.login_page_login {
		/* background: linear-gradient(-45deg, #ee7752, #ffaa00, #23a6d5, #23d5ab); */
		/* background-size: 400% 400%; */
		/* animation: Gradient 15s ease infinite; */

		/* background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%); */
		width: 100%;
		height: 100%;
		min-height: 800px;
		min-width: 1000px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
	}

	.login_page_login .el-form-item {
		margin-bottom: 0 !important;
	}

	@keyframes Gradient {
		0% {
			background-position: 0% 50%;
		}

		50% {
			background-position: 100% 50%;
		}

		100% {
			background-position: 0% 50%;
		}
	}

	.loginInput_ZH_login .el-input__inner {
		border-left: 7px solid #67c23a !important;
		box-sizing: border-box;
	}

	.loginInput_MM_login .el-input__inner {
		border-left: 7px solid #f56c6c !important;
		box-sizing: border-box;
	}

	.loginBox_login {
		width: 500px;
		height: 500px;
		background-color: rgba(255, 255, 255, 0.4);
		border-radius: 50%;
		margin: 0 auto;
		box-shadow: 0px 0px 13px #616161;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-weight: bold;
	}

	.loginIng_login {
		position: absolute;
		width: 100%;
		height: 180px;
		z-index: 1;
	}

	.loginIng_div_login {
		width: 180px;
		height: 180px;
		margin: 0 auto;
		border-radius: 50%;
		text-align: center;
		line-height: 180px;
		font-size: 25px;
		color: #fff;
		font-weight: 800;
	}

	.enterLogin-enter,
	.enterLogin-leave-to {
		animation: myfirst 1s infinite;
	}

	.openSmall-enter,
	.openSmall-leave-to {
		opacity: 0;
	}

	.openSmall-enter-active,
	.openSmall-leave-active {
		transition: opacity 0.5s;
	}

	.enterLogin-enter-active,
	.enterLogin-leave-active {
		animation: myfirst 0.7s forwards;
	}

	.bianda {
		animation: bianda 0.5s forwards;
	}

	@keyframes bianda {
		from {
			transform: scale(0.3);
		}

		to {
			transform: scale(1);
		}
	}

	.bianxiao {
		animation: bianxiao 0.5s forwards;
	}

	@keyframes bianxiao {
		from {
			transform: scale(1);
		}

		to {
			transform: scale(0.3);
		}
	}

	.yingcang {
		animation: yingcang 0.5s forwards;
	}

	@keyframes yingcang {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.buyingcang {
		animation: buyingcang 0.5s forwards;
	}

	@keyframes buyingcang {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes myfirst {
		0% {
			opacity: 0;
			-webkit-transform: scale(0.3);
		}

		50% {
			opacity: 1;
			-webkit-transform: scale(1.05);
		}

		70% {
			-webkit-transform: scale(0.9);
		}

		100% {
			-webkit-transform: scale(1);
		}
	}

	.tipBox_login {
		width: 200px;
		position: absolute;
		right: 10px;
		bottom: 10px;
		font-size: 12px;
		text-align: center;
		color: #fff;
		background-color: rgba(255, 255, 255, 0.5);
	}

	.bg-box {
		width: 100vw;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		background-color: #008ffd;
		z-index: -1;
	}
</style>
